<template>
  <el-container class="main-tags-v">
    <el-tag
      class="tag-v"
      :class="[
        tag.type == 'default' ? 'default-tags' : '',
        tag.status == 'active' ? 'active-tags' : '',
      ]"
      v-for="tag in tags"
      :key="tag.name"
      closable
      :type="tag.status"
      @close="handleClose(tag)"
      @click.stop="selectTags(tag)"
    >
      {{ tag.name }}
    </el-tag>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tags: this.$store.state.tags,
    };
  },
  methods: {
    handleClose(tag) {
      this.$store.state.actIndex = "1";
      var _index = this.tags.indexOf(tag);
      this.tags.splice(_index, 1);
      //重置标签状态，刷新页面
      var _obj = this.$manageTags.resetTags(_index);
      if (_obj && _obj.length == 2) {
        var _path = _obj[0];
        var _tagIndex = _obj[1];
        console.log(_obj)
        if (_path) {
          this.$router.replace(_path);
          this.$store.state.actIndex = _tagIndex;
        }
      }
    },
    selectTags(tag) {
      var _path = this.$manageTags.selectTag(tag);
      if (_path) {
        this.$router.replace(_path);
      }
    },
  },
};
</script>
<style>
.main-tags-v {
  height: 30px;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #dddddd;
}
.tag-v {
  background: #ffffff !important;
  border-radius: 0px !important;
  margin-left: 8px;
  border: 1px solid #999999 !important;
  color: #666666 !important;
  height: 24px !important;
  line-height: 24px !important;
  cursor: pointer;
}
.el-icon-close {
  color: #666666 !important;
}
.el-icon-close:hover {
  background-color: #eeeeee !important;
}
.default-tags .el-icon-close {
  display: none !important;
}
.active-tags {
  background: #42b983 !important;
  color: #ffffff !important;
  border: 1px solid #42b983 !important;
}
.active-tags .el-icon-close {
  color: #ffffff !important;
}
</style>
